<!DOCTYPE html>
<!-- saved from url=(0019)https://jquery.com/ -->
<html class="js multiplebgs boxshadow cssgradients wf-klavikaweb-n7-active wf-sourcecodepro-n4-active wf-sourcecodepro-n7-active wf-klavikaweb-i7-inactive wf-active" lang="en-US"><!--<![endif]--><head data-live-domain="jquery.com"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>jQuery</title>

	<meta name="author" content="JS Foundation - js.foundation">
	<meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">

	<meta name="viewport" content="width=device-width">

	<link rel="shortcut icon" href="https://jquery.com/jquery-wp-content/themes/jquery.com/i/favicon.ico">

	<link rel="stylesheet" href="./jQuery_files/base.css">
	<link rel="stylesheet" href="./jQuery_files/style.css">

	<script type="text/javascript" async="" src="./jQuery_files/ga.js.下载"></script><script src="./jQuery_files/modernizr.custom.2.8.3.min.js.下载"></script>

	<script src="./jQuery_files/jquery-1.11.3.js.下载"></script>

	<script src="./jQuery_files/plugins.js.下载"></script>
	<script src="./jQuery_files/main.js.下载"></script>

	<script src="./jQuery_files/wde1aof.js.下载"></script>
	<style type="text/css">.tk-klavika-web{font-family:"klavika-web",sans-serif;}.tk-source-code-pro{font-family:"source-code-pro",sans-serif;}</style><style type="text/css">@font-face{font-family:klavika-web;src:url(https://use.typekit.net/af/f3ac97/00000000000000003b9acdf9/27/l?subset_id=2&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/f3ac97/00000000000000003b9acdf9/27/d?subset_id=2&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/f3ac97/00000000000000003b9acdf9/27/a?subset_id=2&fvd=n7&v=3) format("opentype");font-weight:700;font-style:normal;}@font-face{font-family:klavika-web;src:url(https://use.typekit.net/af/af9173/00000000000000003b9acdfa/27/l?subset_id=2&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/af9173/00000000000000003b9acdfa/27/d?subset_id=2&fvd=i7&v=3) format("woff"),url(https://use.typekit.net/af/af9173/00000000000000003b9acdfa/27/a?subset_id=2&fvd=i7&v=3) format("opentype");font-weight:700;font-style:italic;}@font-face{font-family:source-code-pro;src:url(https://use.typekit.net/af/756772/0000000000000000000179d5/27/l?subset_id=2&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/756772/0000000000000000000179d5/27/d?subset_id=2&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/756772/0000000000000000000179d5/27/a?subset_id=2&fvd=n7&v=3) format("opentype");font-weight:700;font-style:normal;}@font-face{font-family:source-code-pro;src:url(https://use.typekit.net/af/3c21b3/0000000000000000000179cf/27/l?subset_id=2&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/3c21b3/0000000000000000000179cf/27/d?subset_id=2&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/3c21b3/0000000000000000000179cf/27/a?subset_id=2&fvd=n4&v=3) format("opentype");font-weight:400;font-style:normal;}</style><script>try{Typekit.load();}catch(e){}</script>
	<!-- at the end of the HEAD -->
	<link rel="stylesheet" href="./jQuery_files/docsearch.min.css">
	<link rel="stylesheet" href="./jQuery_files/docsearch.css">

<link rel="https://api.w.org/" href="https://jquery.com/wp-json/">
<meta name="generator" content="WordPress 4.5.2">
<link rel="alternate" type="application/json+oembed" href="https://jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fjquery.com%2F">
<link rel="alternate" type="text/xml+oembed" href="https://jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fjquery.com%2F&amp;format=xml">

</head>
<body class="jquery home page page-id-5 page-template page-template-page-fullwidth page-template-page-fullwidth-php page-slug-index single-author singular">

<header>
	<section id="global-nav">
		<nav>
			<div class="constrain">
				<ul class="projects">
					<li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
					<li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
					<li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
					<li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
					<li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
				</ul>
				<ul class="links l_tinynav1">
					<li><a href="https://plugins.jquery.com/">Plugins</a></li>
					<li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
						<ul>
							<li><a href="https://js.foundation/CLA">CLA</a></li>
							<li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
							<li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
							<li><a href="https://contribute.jquery.org/code/">Code</a></li>
							<li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
							<li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
						</ul>
					</li>
					<li class="dropdown"><a href="https://js.foundation/events">Events</a>
						<ul class="wide">
																		</ul>
					</li>
					<li class="dropdown"><a href="https://jquery.org/support/">Support</a>
						<ul>
							<li><a href="https://learn.jquery.com/">Learning Center</a></li>
							<li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
							<li><a href="https://forum.jquery.com/">Forums</a></li>
							<li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
							<li><a href="https://jquery.org/support/">Commercial Support</a></li>
						</ul>
					</li>
					<li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
						<ul>
							<li><a href="https://js.foundation/about/join">Join</a></li>
							<li><a href="https://js.foundation/about/members">Members</a></li>
							<li><a href="https://js.foundation/about/leadership">Leadership</a></li>
							<li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
							<li><a href="https://js.foundation/about/donate">Donate</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
	</section>
</header>

<div id="container">
	<div id="logo-events" class="constrain clearfix">
		<h2 class="logo"><a href="https://jquery.com/" title="jQuery">jQuery</a></h2>

		<aside>
			<div id="broadcast">
				<a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img src="./jQuery_files/donate.png" title="Support the JS Foundation" alt="Support the JS Foundation" border="0" width="400" height="100"></a>
			</div>
		</aside>
	</div>

	<nav id="main" class="constrain clearfix">
		<div class="menu-top-container">
	<ul id="menu-top" class="menu l_tinynav2">
<li class="menu-item"><a href="https://jquery.com/download/">Download</a></li>
<li class="menu-item"><a href="https://api.jquery.com/">API Documentation</a></li>
<li class="menu-item"><a href="https://blog.jquery.com/">Blog</a></li>
<li class="menu-item"><a href="https://plugins.jquery.com/">Plugins</a></li>
<li class="menu-item"><a href="https://jquery.com/browser-support/">Browser Support</a></li>
	</ul><select id="tinynav2" class="tinynav tinynav2"><option>Navigate...</option><option value="https://jquery.com/download/">Download</option><option value="https://api.jquery.com/">API Documentation</option><option value="https://blog.jquery.com/">Blog</option><option value="https://plugins.jquery.com/">Plugins</option><option value="https://jquery.com/browser-support/">Browser Support</option></select>
</div>

		<form method="get" class="searchform" action="https://jquery.com/">
	<button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
	<label>
		<span class="visuallyhidden">Search jQuery</span>
		<span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;"><input type="text" name="s" value="" placeholder="Search" class="ds-input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: &quot;Lucida Grande&quot;, Lucida, Verdana, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;"><div class="ds-dataset-1"></div></span></span>
	</label>
</form>
	</nav>

	<div id="content-wrapper" class="clearfix row">


<div class="content-full full-width twelve columns">
	<div id="content">
		
		
<div id="banner-secondary" class="row">
	<div class="downloads-box four columns push-eight">
		<div class="download-main">
			<a href="https://jquery.com/download/" class="button large">
				<span class="download"></span>
				Download jQuery
				<span>v3.3.1</span>
				<span class="support-notice">The 1.x and 2.x branches no longer receive patches.</span>
			</a>
			<div class="download-options">
				<a href="https://github.com/jquery/jquery">View Source on GitHub →</a>
				<a href="https://learn.jquery.com/about-jquery/how-jquery-works/">How jQuery Works →</a>
			</div>
		</div>
	</div>
	<div class="features-box row eight columns pull-four">
		<div class="feature-box lightweight-footprint four columns center-txt">
			<div class="feature-box-image"></div>
			<h3>Lightweight Footprint</h3>
			<p>Only 30kB minified and gzipped. Can also be included as an AMD module</p>
		</div>

		<div class="feature-box css3-compliant four columns center-txt">
			<div class="feature-box-image"></div>
			<h3>CSS3 Compliant</h3>
			<p>Supports CSS3 selectors to find elements as well as in style property manipulation</p>
		</div>

		<div class="feature-box cross-browser four columns center-txt">
			<div class="feature-box-image"></div>
			<h3>Cross-Browser</h3>
			<p><a href="https://jquery.com/browser-support/">Chrome, Edge, Firefox, IE, Safari, Android, iOS, and more</a></p>
		</div>
	</div>
</div>

<div id="home-content" class="clearfix row">
	<section class="eight columns">
		<h2 class="block">What is jQuery?</h2>

		<p>jQuery is a fast, small, and feature-rich JavaScript library. It makes
		things like HTML document traversal and manipulation, event handling,
		animation, and Ajax much simpler with an easy-to-use API that works across
		a multitude of browsers. With a combination of versatility and
		extensibility, jQuery has changed the way that millions of people write
		JavaScript.</p>

		<h2 class="block">Other Related Projects</h2>
		<section class="project-tiles row">
			<a href="https://jqueryui.com/" class="project-tile six columns color secondary-orange">
				<div class="jqueryui small logo">jQueryUI</div>
			</a>
			<a href="https://jquerymobile.com/" class="project-tile six columns color secondary-green">
				<div class="jquery-mobile small logo">jQuery Mobile</div>
			</a>
		</section>
		<section class="project-tiles row">
			<a href="https://qunitjs.com/" class="project-tile six columns color qunit-secondary-purple">
				<div class="qunitjs small logo">QUnit</div>
			</a>
			<a href="https://sizzlejs.com/" class="project-tile six columns color sizzle-red">
				<div class="sizzlejs small logo">Sizzle</div>
			</a>
		</section>
	</section>
	<aside class="four columns resources">
		<h3>Resources</h3>
		<ul>
			<li><a href="https://api.jquery.com/">jQuery Core API Documentation</a></li>
			<li><a href="https://learn.jquery.com/">jQuery Learning Center</a></li>
			<li><a href="https://blog.jquery.com/">jQuery Blog</a></li>
			<li><a href="https://contribute.jquery.com/">Contribute to jQuery</a></li>
			<li><a href="https://jquery.org/">About the jQuery Foundation</a></li>
			<li><a href="https://github.com/jquery/jquery/issues">Browse or Submit jQuery Bugs</a></li>
		</ul>

	</aside>
</div>

<section>
	<h2 class="block">A Brief Look</h2>

	<h3>DOM Traversal and Manipulation</h3>
	<p>Get the <code>&lt;button&gt;</code> element with the class 'continue' and change its HTML to 'Next Step...'</p>
	<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">"button.continue"</span> ).html( <span class="string">"Next Step..."</span> )</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>


	<h3>Event Handling</h3>
	<p>Show the <code>#banner-message</code> element that is hidden with
		<code>display:none</code> in its CSS when any button in <code>#button-container</code> is
		clicked.</p>
	<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> hiddenBox = $( <span class="string">"#banner-message"</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#button-container button"</span> ).on( <span class="string">"click"</span>, <span class="keyword">function</span>( event ) {</code></div></div><div class="container"><div class="line"><code>  hiddenBox.show();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>


	<h3>Ajax</h3>
	<p>Call a local script on the server <code>/api/getWeather</code>
		with the query parameter <code>zipcode=97201</code>
		and replace the element <code>#weather-temp</code>'s html with the returned text.</p>
	<div class="syntaxhighlighter javascript">
	<table>
		<tbody>
			<tr>
				
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
						<div class="line n6">6</div>
					
						<div class="line n7">7</div>
					
						<div class="line n8">8</div>
					
						<div class="line n9">9</div>
					
				</td>
				
				<td class="code">
					<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code>  url: <span class="string">"/api/getWeather"</span>,</code></div></div><div class="container"><div class="line"><code>  data: {</code></div></div><div class="container"><div class="line"><code>    zipcode: <span class="number">97201</span></code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  success: <span class="keyword">function</span>( result ) {</code></div></div><div class="container"><div class="line"><code>    $( <span class="string">"#weather-temp"</span> ).html( <span class="string">"&lt;strong&gt;"</span> + result + <span class="string">"&lt;/strong&gt; degrees"</span> );</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</section>	</div>
</div>

	</div>
</div>

<footer class="clearfix simple">
	<div class="constrain">
		<div class="row">
			<div class="six columns offset-by-three">
				<h3><span>Books</span></h3>
				<ul class="books">
					<li>
						<a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
							<img src="./jQuery_files/learning-jquery-4th-ed.jpg" alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92" height="114">
							Learning jQuery Fourth Edition
							<cite>Karl Swedberg and Jonathan Chaffer</cite>
						</a>
					</li>
					<li>
						<a href="https://www.manning.com/books/jquery-in-action-third-edition">
							<img src="./jQuery_files/jquery-in-action.jpg" alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="92" height="114">
							jQuery in Action
							<cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
						</a>
					</li>
					<li>
						<a href="https://www.syncfusion.com/ebooks/jquery">
							<img src="./jQuery_files/jquery-succinctly.jpg" alt="jQuery Succinctly by Cody Lindley" width="92" height="114">
							jQuery Succinctly
							<cite>Cody Lindley</cite>
						</a>
					</li>
				</ul>
			</div>
		</div>

		
<div id="legal">
	<ul class="footer-site-links">
			<li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
			<li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
			<li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
			<li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
			<li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
			<li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
	</ul>
	<p class="copyright">
		Copyright 2019 <a href="https://jquery.org/team/">The jQuery Foundation</a>.
		<a href="https://jquery.org/license/">jQuery License</a>
		<span class="sponsor-line"><a href="https://www.digitalocean.com/" class="do-link">Web hosting by Digital Ocean</a> | <a href="https://www.stackpath.com/" class="sp-link">CDN by StackPath</a></span>
	</p>
</div>

	</div>
</footer>

<script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-1076265-1']);
    _gaq.push(['_setDomainName', 'jquery.com']);
    _gaq.push(['_setAllowLinker', true]);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>
<script type="text/javascript" src="./jQuery_files/comment-reply.min.js.下载"></script>
<script type="text/javascript" src="./jQuery_files/wp-embed.min.js.下载"></script>
	<!-- at the end of the BODY -->
	<script type="text/javascript" src="./jQuery_files/docsearch.min.js.下载" onload="docsearch({apiKey: &#39;3cfde9aca378c8aab554d5bf1b23489b&#39;,
		indexName: &#39;jquery&#39;,
		inputSelector: &#39;input[name=\&#39;s\&#39;]&#39;,
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async=""></script>


<div id="cboxOverlay" style="display: none;"></div><div id="colorbox" class="" style="display: none;"><div id="cboxWrapper"><div><div id="cboxTopLeft" style="float: left;"></div><div id="cboxTopCenter" style="float: left;"></div><div id="cboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left;"></div><div id="cboxContent" style="float: left;"><div id="cboxLoadedContent" style="width: 0px; height: 0px; overflow: hidden; float: left;"></div><div id="cboxTitle" style="float: left;"></div><div id="cboxCurrent" style="float: left;"></div><div id="cboxNext" style="float: left;"></div><div id="cboxPrevious" style="float: left;"></div><div id="cboxSlideshow" style="float: left;"></div><div id="cboxClose" style="float: left;"></div></div><div id="cboxMiddleRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"></div><div id="cboxBottomCenter" style="float: left;"></div><div id="cboxBottomRight" style="float: left;"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div></div></body></html>